<template>
	<view class="home-container">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="logo">悦购</view>
			<view class="search-box">
				<image src="/static/images/search.png" />
				<input type="text" placeholder="搜索商品名称" @click="homeStore.goSearch()" />
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in homeStore.swiperData" :key="index">
				<image :src="item.img" />
			</swiper-item>
		</swiper>

		<!-- 菜单 -->
		<view class="menu">
			<view class="menu-item">
				<image src="/static/images/smdq.png" />
				<view class="menu-text">数码电器</view>
			</view>
			<view class="menu-item">
				<view class="logo">悦购</view>
				<view class="menu-text">悦购咨询</view>
			</view>
			<view class="menu-item" @click="categoryStore.goCategory()">
				<image src="/static/images/flsp.png" />
				<view class="menu-text">分类商品</view>
			</view>
			<view class="menu-item">
				<image src="/static/images/ckgd.png" />
				<view class="menu-text">查看更多</view>
			</view>
		</view>

		<!-- 分割线 -->
		<view class="cutline"></view>

		<!-- 商品列表 -->
		<view class="good-list">
			<view class="good-item" v-for="item in homeStore.goodListData" :key="item.id"
				@click="detailStore.goDetail(item.id)">
				<view class="good-image">
					<image :src="item.img_url" />
				</view>
				<view class="text">
					<view class="title">{{item.title}}</view>
					<view class="other">
						<view class="price">￥{{item.sell_price}}</view>
						<view class="count">{{item.buy}}人购买</view>
					</view>
				</view>
			</view>
		</view>
		<view class="backTop" @click="backTop" v-if="showBackTop">
			↑
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useHomeStore,
		useDetailStore,
		useCartStore,
		useCategoryStore
	} from '../../stores/store.js'

	const homeStore = useHomeStore()
	const detailStore = useDetailStore()
	const cartStore = useCartStore()
	const categoryStore = useCategoryStore()

	onLoad(() => {
		homeStore.getSwiperData()
		homeStore.getGoodListData()
	})
	onShow(() => {
		cartStore.updateTabBarBadge()
	})

	const showBackTop = ref(false)

	onPageScroll((e) => {
		// 当滚动位置大于300时显示按钮，小于时隐藏
		showBackTop.value = e.scrollTop > 300
	})

	const backTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
</script>

<style lang="scss">
	page {}

	.home-container {
		background-color: #f0eded;

		// 头部搜索
		.header {
			height: px2rpx(54);
			width: px2rpx(375);
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			.logo {
				height: px2rpx(40);
				width: px2rpx(50);
				font-size: px2rpx(24);
				font-weight: bold;
				color: #a88238;
			}

			.search-box {
				height: px2rpx(35);
				width: px2rpx(300);
				margin-left: px2rpx(12);
				display: flex;
				align-items: center;
				background-color: #f7f8fa;

				image {
					height: px2rpx(24);
					width: px2rpx(24);
					margin-left: px2rpx(7);
				}

			}
		}

		// 轮播图
		swiper {
			height: px2rpx(240);
			width: px2rpx(375);

			swiper-item {
				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		// 菜单
		.menu {
			height: px2rpx(85);
			width: px2rpx(375);
			display: flex;
			align-items: center;
			background-color: #fff;

			.menu-item {
				height: px2rpx(85);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;

				.logo {
					height: px2rpx(40);
					width: px2rpx(50);
					font-size: px2rpx(24);
					font-weight: bold;
					color: #a88238;
				}

				image {
					height: px2rpx(39);
					width: px2rpx(39);
				}

				.menu-text {
					font-size: px2rpx(14)
				}

			}
		}

		// 分割线
		.cutline {
			border-top: 2px solid #ddd;
			text-align: center;
			margin: px2rpx(16) 0;
		}

		.cutline::after {
			content: "为你推荐";
			color: #969799;
			font-size: px2rpx(14);
			position: relative;
			top: -10px;
			background: #f0eded;
			padding: 0 10px;
		}

		// 商品列表
		.good-list {
			display: flex;
			flex-wrap: wrap;

			.good-item {
				width: px2rpx(170);
				height: px2rpx(265);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #fff;
				border-radius: px2rpx(16);
				margin: px2rpx(8.75);
				overflow: hidden;

				.good-image {
					width: 100%;
					height: px2rpx(206);


					image {
						width: 100%;
						height: px2rpx(170);
					}
				}



				.text {
					display: flex;
					flex-direction: column;
					padding: px2rpx(2);

					.title {
						height: px2rpx(14);
						width: px2rpx(170);
						font-size: px2rpx(12);
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.other {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: px2rpx(42);
						width: px2rpx(170);
						padding: px2rpx(4);

						.price {
							font-size: px2rpx(14);
							color: #f50;
						}

						.count {
							font-size: px2rpx(12);
							color: #999;
							margin-right: px2rpx(10);
						}
					}

				}
			}
		}

		.backTop {
			height: px2rpx(50);
			width: px2rpx(50);
			background-color: skyblue;
			color: #fff;
			font-size: px2rpx(25);
			border-radius: px2rpx(25);
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: px2rpx(30);
			right: px2rpx(20);
		}
	}
</style>